<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <a-button @click='handleEdit("新增",null)' type='primary' icon='plus'>新增</a-button>
    </div>

    <a-table
      ref='table'
      size='middle'
      bordered
      :rowKey="record => record.id"
      childrenColumnName='childrenColumnName'
      :columns='columns'
      :dataSource='dataSource'
      :pagination="false"
    >

<!--      <template slot='order' slot-scope='text, record,index'>-->
<!--        <a-dropdown>-->
<!--          <span style='cursor: pointer' class="ant-dropdown-link" @click="e => e.preventDefault()">-->
<!--            <a-icon type="menu" />-->
<!--          </span>-->
<!--          <a-menu slot="overlay">-->
<!--            <a-menu-item :disabled='index===0'>-->
<!--              <span  @click='arrowUp(text,record,index)' >上移</span>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item :disabled='index===(dataSource.length - 1)'>-->
<!--              <span @click='arrowDown(text,record,index)'>下移</span>-->
<!--            </a-menu-item>-->
<!--          </a-menu>-->
<!--        </a-dropdown>-->
<!--      </template>-->
      <template
        slot="status"
        slot-scope="text,record,index"
      >
        <span v-if='record.status===1' style='color: #00DB00'>启用中</span>
        <span v-else style='color: red'>停用中</span>
      </template>
      <template
        slot="priority"
        slot-scope="text,record,index"
      >
        <a-input style="width:100%" v-model="record.priority" @focus='handleInputFocus(record.priority)' @blur='handleInputConfirm(record,index)' @keyup.enter='handleInputConfirm(record,index)'/>
      </template>
        <span slot='keyword' slot-scope='text, record'>
             <span v-if='text.children&&text.children.length===0'
                   @click='editKey(record.id,record.children)'
                   style='margin-left: 5px;color: #ff0000;cursor: pointer'>暂无请添加</span>
            <span v-else @click='editKey(record.id,record.children)'
                  v-for='(item,index) in text.children' :key='index'
                  style='margin-left: 5px;color: #3399ff;cursor: pointer'><span
              v-show='index!=0'>，
            </span>{{ item.name }}</span>
          </span>

      <span slot='action' slot-scope='text, record,index'>
            <a v-if='record.status===1' @click='changeStatus(record.id,index)'>停用</a>
            <a v-else @click='changeStatus(record.id,index)'>启用</a>
            <a-divider type='vertical' />
            <a @click='handleEdit("编辑",record)'> 编辑 </a>
         <a-divider type='vertical' />
            <a @click='handleDel(record.id)'> 删除 </a>
      </span>
    </a-table>
    <category-edit-modal ref='modal' @updateCategory='loadData'></category-edit-modal>
    <category-item-edit-modal ref='itemModal' @updateCategory='loadData'></category-item-edit-modal>
  </div>
</template>

<script>
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'
import CategoryEditModal from '@views/data-governance/smart-reports/epidemic-daily/components/CategoryEditModal'
import CategoryItemEditModal from '@views/data-governance/smart-reports/epidemic-daily/components/CategoryItemEditModal'

export default {
  name: 'CategoryTemplate',
  components:{
    CategoryEditModal,
    CategoryItemEditModal
  },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '模板名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '模板内容',
          dataIndex: 'content',
          ellipsis: true,
        },
        {
          title: '关键字',
          align: 'center',
          key: 'keyword',
          ellipsis: true,
          scopedSlots: { customRender: 'keyword' },
        },
        {
          title: '优先级',
          align: 'center',
          key: 'priority',
          ellipsis: true,
          width: 100,
          scopedSlots: { customRender: 'priority' },
        },
        {
          title: '状态',
          align: 'center',
          key: 'status',
          width: 100,
          ellipsis: true,
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      priority:null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    editKey(categoryId,keyList) {
      this.$refs.itemModal.open(categoryId, keyList)
    },
    handleInputFocus(priority){
      this.priority=priority;
    },
    handleInputConfirm(val,index){
        if(this.priority===val.priority){
          this.$message.info("未发生改变")
          return;
        }
        if(this.isNaturalNum(val.priority)){
          let params={
            id:val.id,
            priority:val.priority,
          }
          ReportsEpidemicDailyService.editCategoryPriority(params).then(res=>{
            if(res.success===true){
              this.$message.success("更新成功")
              this.loadData()
            }
          }).catch(err=>{
            this.$message.error("更新失败")
          })
        }else {
          this.$message.error("非数字，请输入数字")
          this.dataSource[index].priority=this.priority
        }
      },
      isNaturalNum(num) {
        if(/^[0-9]+$/.test(num) && (num>=0)){
          return true;
        }else{
          return false;
        }
      },
    loadData() {
      ReportsEpidemicDailyService.getCategoryInfo(0).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result
          console.log(this.dataSource)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handleEdit(title,item){
      this.$refs.modal.open(title,item)
    },
    changeStatus(id, index){
      ReportsEpidemicDailyService.changeCategoryStatus(id).then(res => {
        if (res.result === true) {
          this.loadData()
          this.$message.success("更新成功")
        }
      })
    },
    handleDel(id){
      let that =this;
      this.$confirm({
        title: '警告',
        content: '是否删除？',
        onOk() {
          ReportsEpidemicDailyService.deleteCategory(id).then(res => {
            if (res.result === true) {
              that.$message.success("删除成功")
              that.loadData()
            }
          })
        },
        onCancel() {},
      });
    }
  }
}
</script>

<style scoped>

</style>